<template>
  <div class="container2">
    <!-- 发卡记录dialog-->
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      v-dialogDrag
      width="1200px"
      :visible.sync="viewVisible"
    >
        <div class="wrapper">
            <div class="left-wrapper">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane class="record" label="发卡记录" name="first">
                        <el-table
                            size="mini"
                            v-loading="loading"
                            :data="hairCardTableData"
                            style="width: 100%;"
                            border
                            :header-cell-style="{
              'background-color': '#eeeeee !important',
            }"
                            :row-class-name="tableRowClassName"
                        >
                            <el-table-column type="index" label="序号" width="60" align="center">
                            </el-table-column>
                            <el-table-column prop="createDate" label="发卡时间" min-width="170"> </el-table-column>
                            <el-table-column prop="truckNumber" label="车牌号" min-width="120">
                              <template slot-scope="scope">
                                {{scope.row.truckNumber | noValue}}
                              </template>
                            </el-table-column>
                            <el-table-column prop="driver.name" label="司机" min-width="100">
                              <template slot-scope="scope">
                                <div v-if="scope.row.driver">
                                  <p v-if="scope.row.driver.name">{{scope.row.driver.name}}</p>
                                  <p v-else>--</p>
                                </div>
                                <div v-else>--</div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="driver.phone" label="司机电话" min-width="100">
                              <template slot-scope="scope">
                                <div v-if="scope.row.driver">
                                  <p v-if="scope.row.driver.phone">{{scope.row.driver.phone}}</p>
                                  <p v-else>--</p>
                                </div>
                                <div v-else>--</div>
                              </template>
                            </el-table-column>
                            <el-table-column prop="payMoney" label="金额" min-width="80" align="right">
                                <template slot-scope="scope">
                                    <span>{{scope.row.payMoney | noValue}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="state" label="状态" width="80">
                                <template slot-scope="scope">
                                    <div class="state" :class="{empty: scope.row.state===1,normal: scope.row.state===2, process:scope.row.state===3,invalid:scope.row.state===4}">
                                        <span></span>{{$dictUtils.getDictLabel("cardState", scope.row.state, "")}}
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :page-size="page.pageSize"
                            :current-page="page.pageNo"
                            layout="total,prev, pager, next"
                            :total="page.total"
                        >
                        </el-pagination>
                    </el-tab-pane>
                    <el-tab-pane label="操作记录" name="second">
                        <el-table
                            size="mini"
                            v-loading="loading"
                            :data="operatetableData"
                            style="width: 100%;"
                            border
                            :header-cell-style="{
              'background-color': '#eeeeee !important',
            }"
                            :row-class-name="tableRowClassName"
                        >
                            <el-table-column type="index" label="序号" width="60"  align="center">
                            </el-table-column>
                            <el-table-column prop="createDate" label="操作时间"  min-width="170"> </el-table-column>
                            <el-table-column prop="operateType" label="操作类型" min-width="100">
                                <template slot-scope="scope">
                                    {{$dictUtils.getDictLabel("cardOperateType", scope.row.operateType, "")}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="cardUsage" label="卡用途" min-width="80">
                                <template slot-scope="scope">
                                    {{$dictUtils.getDictLabel("cardUsage", scope.row.cardUsage, "")}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="cardHolder" label="持卡人" min-width="150">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.cardUsage === 1">
                                        <p>{{scope.row.payeeName}}</p>
                                        <p>{{scope.row.payeeIdcard}}</p>
                                    </div>
                                    <div v-if="scope.row.cardUsage === 2">
                                        <p><span v-if="scope.row.driver !== undefined">{{scope.row.driver.name}}</span><span>{{scope.row.truckNumber}}</span></p>
                                    </div>
                                    <div v-if="scope.row.cardUsage === 3">
                                        <p><span v-if="scope.row.user !== undefined">{{scope.row.user.name}}</span></p>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="payMoney" label="金额" min-width="70" align="right">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.payMoney">{{scope.row.payMoney}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="cardCode" label="单据编号" min-width="120"> </el-table-column>
                            <el-table-column prop="createBy.loginName" label="操作人" min-width="100"> </el-table-column>
                        </el-table>
                        <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="operateHandleCurrentChange"
                            :page-size="page2.pageSize"
                            :current-page="page2.pageNo"
                            layout="total,prev, pager, next"
                            :total="page2.total"
                        >
                        </el-pagination>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div class="right-wrapper">
                <section class="details">
                    <div class="detail-title">
                        <p>基本信息</p>
                    </div>
                    <div class="detail-content">
                        <ul>
                            <li><span>卡类型:</span>{{ recordForm.cardTypeVal }}</li>
                            <li><span>卡状态:</span>{{recordForm.cardStateVal}}</li>
                            <li><span>卡序号:</span>{{ recordForm.cardNumber }}</li>
                            <li><span>卡内号:</span>{{ recordForm.cardInnerNumber }}</li>
                            <li><span>卡用途:</span>{{ recordForm.cardUsageVal |noValue}}</li>
                            <li>
                                <div class="use">
                                    <div>持卡人:</div>
                                    <div>
                                        <div v-if="recordForm.cardUsage">
                                            <div v-if="recordForm.cardUsage === 1">
                                                <p>{{recordForm.payeeName}}</p>
                                                <p>{{recordForm.payeeIdcard}}</p>
                                            </div>
                                            <div v-if="recordForm.cardUsage === 2">
                                                <p>{{recordForm.driver.name}}</p>
                                                <p>{{recordForm.truckNumber}}</p>
                                            </div>
                                            <div v-if="recordForm.cardUsage === 3">
                                                <p>{{recordForm.user.name}}</p>
                                            </div>
                                        </div>
                                        <div v-else>--</div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <span>导入人:</span>
                                <span v-if="recordForm.createBy !== undefined">
                                    {{ recordForm.createBy.loginName }}
                                </span>
                            </li>
                            <li><span>导入时间:</span> {{ recordForm.createDate }}</li>
                        </ul>
                    </div>
                </section>
            </div>
        </div>
    </el-dialog>
  </div>
</template>
<script>
import { send } from '@/api/truck/cardRegiste/cardRegiste.js'
import { getList } from '@/api/truck/cardOperate/cardOperate.js'
export default {
  components: {},
  data () {
    return {
      page: { total: 0, pageSize: 10, pageNo: 1 },
      page2: { total: 0, pageSize: 10, pageNo: 1 },
      activeName: 'first',
      method: '',
      title: '',
      editTitle: '',
      loading: false,
      tableData: [],
      hairCardTableData: [],
      operatetableData: [],
      recordForm: {
        cardInnerNumber: '',
        cardHolder: '',
        state: '',
        cardStateVal: '',
        cardType: '',
        cardTypeVal: '',
        cardUsage: '',
        cardUsageVal: '',
        cardRegisterId: '',
        operateType: '',
        id: ''
      },
      editVisible: false,
      viewVisible: false
    }
  },
  methods: {
    init (method, row) {
      if (method === 'send') {
        this.recordForm.cardReristerId = row.id
        send({
          id: row.id
        }).then(({data}) => {
          if (data.code === '200') {
            this.recordForm = data.result
            this.recordForm.cardStateVal = this.$dictUtils.getDictLabel('cardState', this.recordForm.state, '')
            this.recordForm.cardTypeVal = this.$dictUtils.getDictLabel('cardType', this.recordForm.cardType, '')
            this.recordForm.cardUsageVal = this.$dictUtils.getDictLabel('cardUsage', this.recordForm.cardUsage, '')
            this.recordForm.cardRegisterId = this.recordForm.id
          }
          this.loading = false
        })
        this.getHairCardList(this.page, 1, '', '', row.id, 1)
        this.getOperateCardList(this.page, 1, '', '', row.id)
        this.viewVisible = true
        this.method = method
        this.title = '磁卡操作详情'
      }
    },
    getHairCardList (params, props, orderName, orderByAORC, cardRegisterId, cardOperate) {
      this.loading = true
      getList({
        pageSize: params.pageSize,
        pageNo: params.pageNo,
        props: props,
        orderBy: orderName,
        orderByAORC: orderByAORC,
        cardRegisterId: cardRegisterId,
        operateType: cardOperate
      }).then(({data}) => {
        if (data.code === '200') {
          this.hairCardTableData = data.result.list
          this.page.total = data.result.count
        }
        this.loading = false
      })
    },
    getOperateCardList (params, props, orderName, orderByAORC, cardRegisterId) {
      this.loading = true
      getList({
        pageSize: params.pageSize,
        pageNo: params.pageNo,
        props: props,
        orderBy: orderName,
        orderByAORC: orderByAORC,
        cardRegisterId: cardRegisterId
      }).then(({data}) => {
        if (data.code === '200') {
          this.operatetableData = data.result.list
          this.page2.total = data.result.count
        }
        this.loading = false
      })
    },
    handleClick (e) {
      if (e.index === '0') {
        this.recordForm.operateType = 1
        this.getHairCardList(this.page, 1, '', '', this.recordForm.cardRegisterId, this.recordForm.operateType)
      } else {
        this.getOperateCardList(this.page, 1, '', '', this.recordForm.cardRegisterId)
      }
    },
    handleSizeChange () {},
    handleCurrentChange (e) {
      this.page.pageNo = e
      this.getHairCardList(this.page, 1, '', '', this.recordForm.cardRegisterId, this.recordForm.operateType)
    },
    operateHandleCurrentChange (e) {
      this.page2.pageNo = e
      this.getOperateCardList(this.page2, 1, '', '', this.recordForm.cardRegisterId)
    },
    send (row) {
      this.$refs.recordForm.init('send', row)
    },
    close (type) {
      if (type === 'edit') {
        this.editVisible = false
        return
      }
      this.viewVisible = false
    },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.title {
  height: 16px;
  font-size: 16px;
  font-weight: 400;
  color: #333333;
}
.wrapper{
    display: flex;
    .left-wrapper{
        width:calc(100% - 288px)
    }
    .right-wrapper{
        width: 258px;
        margin-left: 30px;
        .detail-title{
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
        }
        ul{
            list-style: none;
            margin: 10px 0;
            padding-left: 0;
            li{
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                line-height: 28px;
                >span:first-child{
                    margin-right: 12px;
                  color: #999999;
                }
                .use{
                    display: flex;
                    >div:first-child{
                        margin-right: 12px;
                      color: #999999;
                    }
                }
            }
        }
    }
}
::v-deep .el-dialog > .el-dialog__body {
  font-size: 16px !important;
  overflow: auto;
  color: #333333 !important;
  .el-table td:last-child .cell{
    padding: 0 10px;
  }
}
.el-table .success-row {
  background: #f0f9eb;
}
::v-deep .el-table .warning-row {
  background: #f7f7f7;
}
  .container2{
    ::v-deep.el-dialog{
      .el-dialog__body{
        padding: 20px 20px 24px !important;
        /*padding-bottom: 30px !important;*/
      }
    }
    ::v-deep.el-tabs{
        margin-top: -10px;
      .el-tabs__header{
        margin-bottom: 20px;

        .el-tabs__item{
          padding: 0 11px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
        }
        .el-tabs__active-bar{
          left: -11px;
          width: 84px !important;
        }
      }
    }
    ::v-deep.el-table{
      td{
        .cell{
          p{
            margin: 0;
            line-height: 23px;
            span{
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
</style>
